<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Basic functionality of the 'rotateAxisAngle' method on a 3D transform</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface" />
        <meta name="flags" content="dom" />
        <meta name="assert" content="The 'rotateAxisAngle' method of the CSSMatrix interface is supported for 3D matrices" />
        <style type="text/css">
            #result
            {
                background: red;
                height: 100px;
                width: 100px;
            }
        </style>
        <script type="text/javascript">    
            function startTest()
            {
                var testDiv = document.getElementById("result");
                cssMatrixConstructor = "new CSSMatrix()";

                //Rounds the given number to three decimal places
                function round(number)
                {
                    var result = Math.round(number * 1000) / 1000;
                    return result;
                }

                var matrix = eval(cssMatrixConstructor);
                var resultMatrix = matrix.rotateAxisAngle(20,-50,30,30);
                var isOriginalMatrixUnchanged = false;
                var isResultMatrixCorrect = false;

                //Verify the original matrix is unchanged after the rotate operation
                if ((1 == matrix.m11) &&
                (0 == matrix.m12) &&
                (0 == matrix.m13) &&
                (0 == matrix.m14) &&
                (0 == matrix.m21) &&
                (1 == matrix.m22) &&
                (0 == matrix.m23) &&
                (0 == matrix.m24) &&
                (0 == matrix.m31) &&
                (0 == matrix.m32) &&
                (1 == matrix.m33) &&
                (0 == matrix.m34) &&
                (0 == matrix.m41) &&
                (0 == matrix.m42) &&
                (0 == matrix.m43) &&
                (1 == matrix.m44))
                {
                    isOriginalMatrixUnchanged = true;
                }

                //Verify the resulting matrix is correct (within three decimal places)
                if (0.880 == round(resultMatrix.m11) &&
                0.208 == round(resultMatrix.m12) &&
                0.427 == round(resultMatrix.m13) &&
                0 == resultMatrix.m14 &&
                -0.279 == round(resultMatrix.m21) &&
                0.954 == round(resultMatrix.m22) &&
                0.109 == round(resultMatrix.m23) &&
                0 == resultMatrix.m24 &&
                -0.384 == round(resultMatrix.m31) &&
                -0.215 == round(resultMatrix.m32) &&
                0.898 == round(resultMatrix.m33) &&
                0 == resultMatrix.m34 &&
                0 == resultMatrix.m41 &&
                0 == resultMatrix.m42 &&
                0 == resultMatrix.m43 &&
                1 == resultMatrix.m44)
                {
                    isResultMatrixCorrect = true;
                }

                if (isOriginalMatrixUnchanged && isResultMatrixCorrect)
                {
                    var testDiv = document.getElementById("result");
                    testDiv.style.background = "black";
                }
            }
        </script>
    </head>
    <body onload="startTest()">
        <p>Test passes if there is no red visible on the page.</p>
        <div id="result"></div>
    </body>
</html>
